<template>
  <div>
    <div class="ActivationCode">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          :immediate-check="false"
          v-model="loading"
          :finished="finished"
          loading-text="加载中..."
          finished-text="没有更多数据了~"
          @load="onLoad"
          :offset="0"
          style="background: #ffffff"
        >
          <div v-for="(item, index) in list" :key="index">
            <div class="main" :class="item.isBind === 1 ? 'stateCode' : ''">
              <span>{{ getTime(item.createTime) }}</span>
              <p
                v-clipboard:copy="item.code"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >
                {{ item.code }}
              </p>
              <span>{{ item.isBind === 1 ? "已使用" : "未使用" }}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { formatDate1 } from "@/utils/filters";
export default {
  data() {
    return {
      list: [],
      pageNumber: 1,
      pageSize: 10,
      loading: true,
      finished: false,
      isLoading: false,
    };
  },
  created() {
    this.getActiveCodeList();
  },
  methods: {
    onCopy(){
      this.$toast.success("复制成功");
    },
    onError(){
      this.$toast("复制失败");
    },
    //刷新
    onRefresh() {
      this.isLoading = true;
      this.list = [];
      this.pageNumber = 1;
      this.getActiveCodeList();
    },
    //分页
    onLoad() {
      this.loading = true;
      this.pageNumber += 1;
      this.getActiveCodeList();
    },
    getTime(time) {
      return formatDate1(time);
    },
    getActiveCodeList() {
      let _self = this;
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });
      this.$Api
        .getActiveCodeList({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.code == 1) {
            _self.$toast.clear();
            _self.list = _self.list.concat(res.data.list);
            _self.finished = res.data.lastPage;
            _self.loading = false;
            _self.isLoading = false;
          }
        });
    },
  },
};
</script>

<style scoped>
.stateCode {
  color: #aaaaaa;
}
.ActivationCode .main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 49px 27px;
  border-bottom: 1px #e7e7e7 solid;
}
.ActivationCode .main p {
  flex: 1;
  text-align: left;
  margin-left: 58px;
}
</style>